import React ,{useState,useEffect}from 'react';
import { Tabs ,Table, message} from 'antd';
import * as service from '../../../../api/leave'
import type {TabsProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './Leave.scss'
interface Props{
 
}

interface DataType {
    id: number;
    name: string;
    department: string;
    post: string;
    iphone: string;
    role: string;
    Job_No: string;
    Certificate: string;
    status: number;
    promoted1:string,
    trial:string,
    time:string,
    siling:string,
    cause:string
}
function Leave(props:Props) {

    let [tableData,setTableData] = useState<DataType[]>([])
    let [tableData1,setTableData1] = useState<DataType[]>([])
    //确认离职
    let queren = async(record:any)=>{
        record.status = 1
        let res = await service.resigneda_update(record)
        dai()
        message.success({content:'离职成功'})
    }
    //放弃离职
    let fangqi = async(record:any) =>{
        // let res = await service.resigneda_delete({id:record.id})
        dai()
        message.success({content:'操作成功'})
    }
    //撤销离职
    let chexiao = async(record:any)=>{
        // let res = await service.resigneda_delete({id:record.id})
        yi()
        message.success({content:'操作成功'})
    }
    //重新入职
    let chongxin = async(record:any)=>{
        record.status = 0
        let res = await service.resigneda_update(record)
        yi()
        message.success({content:'撤销成功'})
    }
    //待离职数据源
    const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          key: 'id',
          render: (_,record,) => <span>{tableData.indexOf(record)+1}</span>,
        },
        {
          title: '姓名',
          key: 'name',
          render: (_,record,) => <span>{record.name}</span>,
        },
        {
          title: '部门',
          key: 'department',
          render: (_,record,) => <span>{record.department}</span>,
        },
        {
          title: '岗位',
          key: 'post',
          render: (_,record,) => <span>{record.post}</span>,
        },
        {
          title: '手机号',
          key: 'iphone',
          render: (_,record,) => <span>{record.iphone}</span>,
        },
        {
          title: '工号',
          key: 'Job_No',
          render: (_,record,) => <span>{record.Job_No}</span>,
        },
        {
          title: '工作性质',
          key: 'role',
          render: (_,record,) => <span>{record.role}</span>,
        },
        {
          title: '状态',
          key: 'status',
          render: (_,record,) => <span>{(record.status) == 0 ? '待离职': "已离职"}</span>,
        },
        {
          title: '司龄',
          key: 'siling',
          render: (_,record,) => <span>{record.siling }</span>,
        },
        {
          title: '离职原因',
          key: 'cause',
          render: (_,record,) => <span>{record.cause }</span>,
        },
        {
          title: '操作',
          key: 'time',
          render: (_,record,) =><div>
            <span style={{color:'red',border:"1px solid red",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick={()=>{queren(record)}}>确认离职</span>
            &emsp;
            &emsp;
            <span style={{color:'blue',border:"1px solid blue",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick={()=>{fangqi(record)}}>放弃离职</span>
          </div>
        },

    ]
    //已离职数据源
    const columns1: ColumnsType<DataType> = [

        {
            title: '序号',
            key: 'id',
            render: (_,record,) => <span>{tableData1.indexOf(record)+1}</span>,
          },
          {
            title: '姓名',
            key: 'name',
            render: (_,record,) => <span>{record.name}</span>,
          },
          {
            title: '部门',
            key: 'department',
            render: (_,record,) => <span>{record.department}</span>,
          },
          {
            title: '岗位',
            key: 'post',
            render: (_,record,) => <span>{record.post}</span>,
          },
          {
            title: '手机号',
            key: 'iphone',
            render: (_,record,) => <span>{record.iphone}</span>,
          },
          {
            title: '工号',
            key: 'Job_No',
            render: (_,record,) => <span>{record.Job_No}</span>,
          },
          {
            title: '工作性质',
            key: 'role',
            render: (_,record,) => <span>{record.role}</span>,
          },
          {
            title: '状态',
            key: 'status',
            render: (_,record,) => <span>{(record.status) == 0 ? '待离职': "已离职"}</span>,
          },
          {
            title: '司龄',
            key: 'siling',
            render: (_,record,) => <span>{record.siling }</span>,
          },
          {
            title: '离职原因',
            key: 'cause',
            render: (_,record,) => <span>{record.cause }</span>,
          },
        {
          title: '操作',
          key: 'time',
          render: (_,record,) =><div>
          <span style={{color:'red',border:"1px solid red",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick = {()=>{chongxin(record)}}>重新待职</span>
          &emsp;
          &emsp;
          <span style={{color:'blue',border:"1px solid blue",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick = {(()=>{chexiao(record)})}>撤销离职</span>
        </div>
        },

    ]
    let pending:any = ()=>{
        return(
            <Table columns={columns} dataSource={tableData} rowKey={"id"}/>
        )
    } 
    let resigneda:any = ()=>{
        return(
            <Table columns={columns1} dataSource={tableData1} rowKey={"id"}/>
        )
    }
    const onChange = (key: string) => {
        console.log(key);
    };
    const items: TabsProps['items'] = [
        {
          key: '1',
          label: `待离职`,
          children: pending(),
        },
        {
          key: '2',
          label: `已离职`,
          children: resigneda(),
        },
      ];
    let dai = async ()=>{
        let res = await service.pending_list({status:0})
        setTableData(res.data.data)
    }
    let yi = async ()=>{
        let res = await service.resigneda_list({status:1})
        setTableData1(res.data.data)

    }
    useEffect(()=>{
        dai()
        yi()
    },[])
    return (
        <div className='Leave'>
          <div className='top'>
            离职管理
          </div>
            <Tabs size="small" defaultActiveKey="1"style={{padding:'20px'}}  items={items} onChange={onChange} />
        </div>
    );
}

export default Leave;